/**
* 团队赛报名需注册成功组件，使用： this.$store.dispatch('setModal',{visible:true，modalId:'teamLoginModal',callback:function(){}});
* callback: 登录成功后需要执行的方法，如刷新页面或接着报名逻辑
*/
<template>
  <transition name="slide-fade">
    <div  class="modal" v-if="modal.visible && modal.modalId=='teamLoginModal'" id="teamLoginModal" tabindex="-1" @click.stop.prevent="modalHide">
      <div class="modal-dialog" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang-m@2x.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">
          <div class="oxhead">
            <img src="https://dl.app.gtja.com/nrng/shareimages/oxhead/niuku.png">
          </div>
          <div class="wrapper">
            <h4>大王，只有<span>注册用户</span><br>才可报名哦</h4>
            <p>只需简单手机注册和设置昵称，easy~</p>
            <span class="count-down">{{second}}秒进入手机注册</span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import BaseModal from 'components/modal/BaseModal'
  import RemoteDAO from 'common/remoteDAO'
  import _ from 'underscore'

  export default {
    data () {
      return {
        second:3
      }
    },
    extends:BaseModal,
    updated:function(){
      if(this.modal.modalId == 'teamLoginModal'){
        setTimeout(()=> {
          this.second--;
          if (this.second <= 0) {
            this.modalHide()
            RemoteDAO.callNativeLogin(response => {
              if (Number(response.error) === 0) {
                if (_.isFunction(this.modal.callback)) {
                  this.modal.callback();
                }
              }
            })
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
  .wrapper{
    top:140px !important;
  }
  h4{
    font-size: 20px;
    font-weight: bolder;
  }
  p{
    font-size: 12px;
    margin-bottom: 35px;
  }
  .count-down{
    font-size: 14px !important;;
  }
</style>
